<template>
  <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
    <iframe :src="getOfficeOnlineUrl(modelValue)" width="100%" :height="windowHeight" frameborder="0"></iframe>
  </div>
</template>

<script setup name="PictureViewer" lang="ts">
import { defineModel } from 'vue';

const modelValue = defineModel('url', {
  type: String,
  default: 'abc',
  required: true
});
const windowHeight = ref(window.innerHeight);
const updateHeight = () => {
  windowHeight.value = window.innerHeight;
};

const getOfficeOnlineUrl = (url: string) => {
  const urlEncoding = encodeURIComponent(url)
  return `https://view.officeapps.live.com/op/view.aspx?src=${urlEncoding}`
}


onMounted(() => {
  window.addEventListener('resize', updateHeight);
});
onUnmounted(() => {
  // 组件卸载时移除resize事件监听器
  window.removeEventListener('resize', updateHeight);
});
</script>
